<template>
	<view style="background-color:#F7F7F7 ;">
		<view class="device-list">
			<!-- <view class="top-box">
				<view class="select-top">
					<view class="select-text">
						<text>今天</text>
						<text>本周</text>
						<text>本月</text>
					</view>
					<view class="select-flex-range">
						<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
					</view>
				</view>
				<view class="select-box">
					<view class="select-flex">
						<uni-data-select
							v-model="selected"
							:localdata="selectList"
							@change="onChange"
						></uni-data-select>
					</view>
					<view class="select-flex">
						<uni-data-select
							v-model="selectedStatus"
							:localdata="selectListStatus"
							@change="onChangeStatus"
						></uni-data-select>
					</view>
				</view>
			</view> -->
			<view class="order-total">
				<view class="item">
					<view class="t0">订单</view>
					<view class="t1">{{ user.total_order }}</view>
				</view>
				<view class="item">
					<view class="t0">合计(元)</view>
					<view class="t1">{{ user.total_income }}</view>
				</view>
			</view>
			<view class="device-list-box" v-if="datalist.length > 0">
				<view class="item-title">
					<view class="t0">名称</view>
					<view class="t1">设备</view>
					<view class="t2">笔数</view>
					<view class="t3">合计收入</view>
				</view>
				<view class="device-list-item" v-for="(item, i) in datalist" :key="i"
					@click="toareaIncomeDetails(item)">
					<view class="t0">
						<!-- 宝鸡里小木马乐园 -->
						{{ item.name }}
					</view>
					<view class="t1">{{ item.device_all }}</view>
					<view class="t2">{{ item.order_num }}</view>
					<view class="t3">{{ item.shouyi }}</view>
					<image src="../../static/images/user/返回备份 20@2x.png" mode=""></image>
				</view>
				<!-- <view class="more-tip">～没有更多了～</view> -->
			</view>
			<view class="empty-box" v-else>
				<image src="../../static/images/nodata.png"></image>
				<text>暂无记录～</text>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/index.js';
	import store from '@/store/index.js';
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				selected: '',
				range: '',
				user: null,
				selectList: [{
						value: '1',
						text: '全部设备',
						isDefault: false
					},
					{
						value: '2',
						text: '在线',
						isDefault: true
					},
					{
						value: '3',
						text: '离线',
						isDefault: false
					},
					{
						value: '4',
						text: '水位过低预警',
						isDefault: false
					},
					{
						value: '5',
						text: '电量过低预警',
						isDefault: false
					},
					{
						value: '6',
						text: '所有故障',
						isDefault: false
					}
				],
				selectedStatus: '',
				selectListStatus: [{
						value: '1',
						text: '全部状态',
						isDefault: false
					},
					{
						value: '2',
						text: '启用',
						isDefault: true
					},
					{
						value: '3',
						text: '离线',
						isDefault: false
					}
				],
				datalist: [],
				// 数据源
				dynamicFormData: {
					time: ''
				},
				// 规则
				dynamicRules: {
					time: {
						rules: [{
							required: true,
							errorMessage: '运行时间不能为空'
						}]
					}
				}
			};
		},
		onLoad() {},
		onShow() {
			this.getGroundList();
			this.getUserInfo()
		},

		methods: {
			...mapMutations(['saveUserInfo']),
			getUserInfo() {
				api.getUserInfo().then(res => {
					this.user = res.data.userinfo;
					this.saveUserInfo(this.user);
				});
			},
			getGroundList() {
				api.getGroundList().then(res => {
					this.datalist = res.data;
				});
			},
			maskClick(e) {
				console.log('maskClick事件:', e, this.range);
			},
			onChange(event) {
				console.log('选中的值：' + this.selected);
			},
			onChangeStatus(event) {
				console.log('选中的值：' + this.selectedStatus);
			},
			toareaIncomeDetails(data) {
				uni.navigateTo({
					url: './areaIncomeDetails?ground_id=' + data.id
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.device-list {
		background: url('/static/images/home/home-bg.png') no-repeat;
		background-size: 100% 408rpx;
		padding-bottom: 100rpx;
		padding: 28rpx;

		.top-box {
			.select-top {
				display: flex;
				align-items: center;

				.select-text {
					display: flex;
					align-items: center;
					line-height: 88rpx;

					uni-text {
						width: 88rpx;
						height: 88rpx;
						background: #ffffff;
						box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1);
						border-radius: 24rpx;
						font-size: 28rpx;
						color: #49a1fd;
						text-align: center;
						margin-right: 10rpx;
					}
				}

				.select-flex-range {
					flex: 1;
				}
			}

			.select-box {
				display: flex;
				margin: 30rpx 0 20rpx;

				.select-flex {
					flex: 1;
					margin-right: 20rpx;

					&:last-child {
						margin-right: 0;
					}
				}
			}
		}

		.order-total {
			background: url('../../static/images/user/编组 3备份 2@2x.png') no-repeat;
			background-size: 100% 100%;
			padding: 48rpx 0;
			margin: 0 -10rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.item {
				text-align: center;
				.t0 {
					font-size: 28rpx;
					color: #000000;
					line-height: 40rpx;
				}

				.t1 {
					font-weight: 600;
					font-size: 44rpx;
					color: #49a1fd;
					line-height: 60rpx;
					text-align: center;
				}
			}
		}

		.device-list-box {
			background: url('../../static/images/home/编组 3备份 2@2x.png') no-repeat;
			background-size: 100% 100%;
			padding: 40rpx 28rpx 100rpx;
			// border-radius: 14px;
			position: relative;
			margin: 0 -4rpx 20rpx -2rpx;

			.item-title {
				display: flex;
				align-items: center;
				font-weight: 550;
				font-size: 30rpx;
				color: #000000;
				line-height: 92rpx;
				border-bottom: 2rpx solid #d3ebff;

				.t0 {
					width: 50%;
				}

				.t1 {
					width: 15%;
					text-align: center;
				}

				.t2 {
					width: 15%;
					text-align: center;
				}

				.t3 {
					width: 20%;
					text-align: center;
				}
			}

			.device-list-item {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #000000;
				line-height: 92rpx;
				border-bottom: 2rpx solid #d3ebff;

				uni-image {
					width: 14rpx;
					height: 24rpx;
					text-align: right;
				}

				.t0 {
					width: 50%;
				}

				.t1 {
					width: 15%;
					text-align: center;
				}

				.t2 {
					width: 15%;
					text-align: center;
				}

				.t3 {
					width: 20%;
					text-align: center;
				}
			}

			.more-tip {
				font-size: 28rpx;
				color: #a7a5a5;
				line-height: 40rpx;
				text-align: center;
				margin-top: 40rpx;
			}
		}

		.btn {
			background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
			box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(20, 135, 255, 0.4);
			border-radius: 44rpx;
			font-weight: 500;
			font-size: 34rpx;
			color: #ffffff;
			line-height: 88rpx !important;
			text-align: right;
			height: 88rpx;
			margin: 36rpx 28rpx;
			width: calc(100% - 56rpx);
			text-align: center;
			border: none;

			&:after {
				border: none;
			}
		}

		.empty-box {
			margin: 0 -20rpx;
			text-align: center;
			background: url('../../static/images/home/empty-bg.png') no-repeat;
			padding: 200rpx 0 160rpx;
			background-size: 100% 100%;

			uni-image {
				width: 400rpx;
				height: 340rpx;
			}

			uni-text {
				font-size: 28rpx;
				color: #a7a5a5;
				line-height: 40rpx;
				margin-top: 50rpx;
				display: block;
			}
		}
	}
</style>